<template>
  <n-space vertical align="end" :size="[0, 0]">
    <div v-show="!advSearch">
      <n-space align="center">
        <n-input-group class="w-160">
          <n-input clearable size="small" placeholder="请输入查询内容，多项内容以空格隔开" />
          <n-button type="primary" size="small" @click="$attrs.onClick"><icon-tabler:search /></n-button>
        </n-input-group>
        <n-button v-if="false" text class="text-12px" @click="handleToggle">
          高级查询<icon-gridicons:dropdown />
        </n-button>
      </n-space>
    </div>
    <div v-show="advSearch">
      <n-space align="start">
        <n-space :size="[2, 1]" class="n-card n-card--bordered p-5px w-438px">
          <div class="w-70px" />
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.date"
            default-value="0_0"
          />
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.filter"
            default-value=">="
          />
          <n-date-picker size="small" class="w-150px" type="date" :format="dateFormat" />
          <!-- 分隔 -->
          <n-select
            size="small"
            class="w-70px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.condition"
            default-value="and"
          />
          <div class="w-100px text-14px text-center mt-5px">单据编号</div>
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.filter"
            default-value="like"
          />
          <n-input size="small" class="important-w-150px" />
          <!-- 分隔 -->
          <n-select
            size="small"
            class="w-70px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.condition"
            default-value="and"
          />
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.department"
            default-value="0_3"
          />
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.filter"
            default-value="rlike"
          />
          <n-select
            v-model:show="selectDepartmentNo"
            size="small"
            class="w-150px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.filter"
            filterable
          >
            <template #arrow>
              <icon-fluent:search-16-regular v-if="selectDepartmentNo" />
              <icon-fluent:book-number-16-regular v-else />
            </template>
          </n-select>
          <!-- 分隔 -->
          <n-select
            size="small"
            class="w-70px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.condition"
            default-value="and"
          />
          <div class="w-100px text-14px text-center mt-5px">审核状态</div>
          <n-select
            size="small"
            class="w-252px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.audit"
            default-value=""
          />
        </n-space>
        <n-space :size="[2, 1]" class="p-6px" vertical align="center">
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-button text @click="handleToggle">
                <icon-ion:md-arrow-dropup class="text-16px" />
              </n-button>
            </template>
            <span>收起高级查询</span>
          </n-tooltip>
          <n-select
            size="tiny"
            class="w-70px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.condition"
            default-value="and"
          />
          <n-button class="w-70px" size="tiny" type="primary" @click="$attrs.onClick">查询</n-button>
          <n-button class="w-70px" size="tiny" tertiary>重置</n-button>
        </n-space>
        <n-space :size="[2, 1]" class="n-card n-card--bordered p-5px w-448px">
          <div class="w-70px" />
          <n-select
            size="small"
            class="w-110px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.date"
            default-value="0_0"
          />
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.filter"
            default-value="<="
          />
          <n-date-picker size="small" class="w-150px" type="date" :format="dateFormat" />
          <!-- 分隔 -->
          <n-select
            size="small"
            class="w-70px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.condition"
            default-value="and"
          />
          <n-select
            size="small"
            class="w-110px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.supplier"
            default-value="1_2"
          />
          <n-select
            size="small"
            class="w-100px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.filter"
            default-value="="
          />
          <n-input size="small" class="important-w-150px" />
          <!-- 分隔 -->
          <n-select
            size="small"
            class="w-70px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.condition"
            default-value="and"
          />
          <div class="w-110px text-14px text-center mt-5px">处理状态</div>
          <n-select
            size="small"
            class="w-252px"
            :consistent-menu-width="false"
            :options="searchSelectOptions.status"
            default-value=""
          />
          <!-- 分隔 -->
          <div class="h-29px"></div>
        </n-space>
      </n-space>
    </div>
  </n-space>
</template>
<script lang="ts">
export default {
  inheritAttrs: false
};
</script>
<script setup lang="ts">
import { ref } from 'vue';

const advSearch = ref<boolean>(false);
function handleToggle() {
  advSearch.value = !advSearch.value;
}
const dateFormat = 'yyyy/MM/dd';

const selectDepartmentNo = ref(false);

const searchSelectOptions = {
  date: [
    {
      label: '单据日期',
      value: '0_0'
    },
    {
      label: '审核日期',
      value: '0_1'
    },
    {
      label: '受理时间',
      value: '0_6'
    }
  ],
  filter: [
    {
      label: '等于',
      value: '='
    },
    {
      label: '大于等于',
      value: '>='
    },
    {
      label: '小于等于',
      value: '<='
    },
    {
      label: '大于',
      value: '>'
    },
    {
      label: '小于',
      value: '<'
    },
    {
      label: '不等于',
      value: '<>'
    },
    {
      label: '包含',
      value: 'like'
    },
    {
      label: '结尾是',
      value: 'llike'
    },
    {
      label: '开头是',
      value: 'rlike'
    },
    {
      label: '不包含',
      value: 'nlike'
    }
  ],
  department: [
    {
      label: '部门编号',
      value: '0_3'
    },
    {
      label: '部门名称',
      value: '0_4'
    }
  ],
  supplier: [
    {
      label: '供应商编号',
      value: '1_2'
    },
    {
      label: '供应商名称',
      value: '1_3'
    }
  ],
  audit: [
    {
      label: '-全部-',
      value: ''
    },
    {
      label: '未审核',
      value: '0'
    },
    {
      label: '已审核',
      value: '1'
    },
    {
      label: '待审核',
      value: '2'
    }
  ],
  status: [
    {
      label: '-全部-',
      value: ''
    },
    {
      label: '未提交',
      value: '0'
    },
    {
      label: '已提交',
      value: '1'
    },
    {
      label: '已退回',
      value: '2'
    },
    {
      label: '受理通过',
      value: '3'
    }
  ],
  condition: [
    {
      label: '并且',
      value: 'and'
    },
    {
      label: '或者',
      value: 'or'
    }
  ]
};
</script>

<style scoped></style>
